<template>
  <div id="Teacher">
    <section class="l-header">
      <div class="header-info">
        <h3 class="header-info__name">{{ infoData.realname }}</h3>
        <p class="header-info__sub">{{ infoData.companyName }} {{ infoData.profession }}</p>
        <ol class="info-tag">
          <li>
            <van-icon class="info-tag__icon" name="cluster-o"/>
            <span class="vertical-middle">擅长指导领域：{{ infoData.goodCoaching }}</span>
          </li>
          <li>
            <van-icon class="info-tag__icon" name="birthday-cake-o"/>
            <span class="vertical-middle">投资领域：{{ infoData.investment }}</span>
          </li>
        </ol>
      </div>
      <van-image :src="infoData.avatar" class="l-header__avatar"/>
    </section>
    <p class="c-intro" v-html="infoData.profile"/>
    <h3 class="l-title"><span class="l-title__name">TA解决的问题</span></h3>
    <vj-list v-if="load" style="margin-top: 10px" :load-more="loadMore" >
      <template #default="{item:{mistitle,name,title,sort,replyNo,createTime,id,replyno}}">
        <section @click="$pushRoute({path:'/support/feq',query:{customId:id}})" class="c-feq">
          <h3 class="c-feq__title">{{ mistitle }}</h3>
          <div class="c-feq__member">
            <van-image fit="cover" class="c-feq__avatar" :src="avatar"/>
            <em>{{ name }}</em>
          </div>
          <p class="c-feq__content">{{ title }}</p>
          <footer class="feq-footer">
            <aside class="feq-footer__wrap">
              <div class="feq-footer__tag">{{ sort }}</div>
              <span>{{ replyno }} 回答</span>
            </aside>
            <em>{{ createTime }}</em>
          </footer>
        </section>
      </template>
    </vj-list>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {Prop} from "vue-property-decorator";
import {requestByGet} from "@/utils/request";
import VjList from "@/components/vj-list.vue";

export const title = ""
@Component({
  components: {VjList}
})
export default class Teacher extends Vue implements ComponentOptions<Vue> {
  name = "Teacher"
  @Prop() customId!: string;
  infoData: any = {};
  mistakeList = [];
  load = false;
  i = 2;

  async created() {
    ({user:this.infoData,mistake:this.mistakeList} = await requestByGet(`/sys/user/queryTeacherById`, {id: this.customId}));
    this.load = true;
  }

  loadMore() {
    if (!--this.i) return [];
    return this.mistakeList || [];
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#Teacher {
  padding: 16px;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  .c-feq {
    &__title {
      font-size: 16px;
    }

    &__member {
      @include alignCenter;
      font-size: 12px;
    }

    &__avatar {
      @include round(20px);
      margin-right: 6px;
    }

    &__content {
      color: $p-color;
      line-height: 1.3;
      margin: 5px 0 3px;
      @include t-overflow(2);
    }

    .feq-footer {
      @include flex-between;
      font-size: 12px;

      &__wrap {
        @include alignCenter;
      }

      &__tag {
        padding: 3px;
        line-height: 1;
        border-radius: 2px;
        background: #f5f5f5;
        margin-right: 3px;
      }
    }
  }

  .l-header {
    display: flex;

    .header-info {
      line-height: 1.8;
      flex: 1;
      color: $strong-clr;

      &__name {
        font-size: 20px;
      }

      &__sub {
        font-size: 12px;
        color: $tip-clr;
      }
    }

    .info-tag {
      margin-top: 6px;

      &__icon {
        vertical-align: middle;
        color: #349e7e;
        font-size: 20px;
        margin-right: 10px;
        margin-bottom: 2px;
      }
    }

    &__avatar {
      width: 90px;
      height: 114px;
      flex-shrink: 0;
    }
  }

  .c-intro {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    margin: 10px 0;
  }

  .l-title {
    font-size: 14px;
    color: #3d3d3d;
    padding: 10px 16px;
    position: relative;

    &__name {
      position: relative;
      z-index: 1;
    }

    &:before {
      content: "";
      @include absoluteFull;
      background: #f5f5f5;
      transform: scaleX(2);
    }
  }

  .l-content {
    flex: 1;
    margin-top: 10px;
    position: relative;

    &__pic {
      @include absoluteCenter;
      width: 200px;
    }
  }
}
</style>
